<template>
	<view class="audio-page">
		<view class="box-left">
			<view class="page-btn" @click="clickAudio">
				<!-- <image src="../static/voice.png" mode="widthFix"></image> -->
				<!-- <image v-if="!music_play" src="../static/play.png" mode="widthFix"></image>
				<image v-if="music_play" src="../static/stop.png" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="box-content">
			<view class="progress">
				<text>{{$utils.getMinuteTime(start_time)}}</text>
				<slider :value="(start_time / total_time) * 100" block-size="10" block-color="#5c5858"
					activeColor="#5c5858" @change="sliderChange"></slider>
				<text>{{$utils.getMinuteTime(total_time)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'custom-audio',
		props: {
			musicID: {
				type: [String, Number],
				default: 0
			},
			music: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				start_time: 0,
				total_time: '',
				music_play: false,
				interval: null,
				timeupdata: null
			}
		},
		mounted() {
			this.playAudio();
			uni.$on('update', (data) => {
				if (data.musicID != this.musicID) {
					this.music_play = false;
					this.start_time = 0;
				}
			});
		},
		methods: {
			// 播放音乐
			playAudio() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.music;

				this.interval = setInterval(() => {
					if (this.innerAudioContext.duration != 0 && !isNaN(this.innerAudioContext.duration)) {
						this.total_time = Math.round(this.innerAudioContext.duration)
						// console.log('音频时长', this.total_time)
						clearInterval(this.interval)
					}
				}, 100)
				this.timeupdata = setInterval(() => {
					// console.log((this.start_time / this.total_time) * 100)
					if (this.music_play && this.vuex_audioMusicID == this.musicID) {
						this.start_time++
						// console.log('当前时间', this.utils.getMinuteTime(this.start_time))
						if (this.start_time >= this.total_time) {
							this.music_play = false;
							setTimeout(() => {
								this.start_time = 0;
							}, 1000)
						}
					}
				}, 1000)
			},
			clickAudio() {
				if (this.music_play) {
					this.music_play = false;
					this.innerAudioContext.pause();
				} else {
					if (this.vuex_audioMusicID != this.musicID) {
						this.$u.vuex('vuex_audioMusicID', this.musicID);
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.src = this.music;
						uni.$emit('update', {
							musicID: this.musicID
						});
					}

					this.music_play = true;
					this.innerAudioContext.play();
				}
			},
			// 拖动进度条
			sliderChange(e) {
				// console.log(e)
				const second = (e.detail.value / 100) * this.total_time;
				this.innerAudioContext.seek(second);
				this.start_time = second;
			},
		},
		destroyed() {
			this.music_play = false;
			this.innerAudioContext.pause();
			clearInterval(this.timeupdata);
		}
	}
</script>

<style lang="scss">
	.audio-page {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 1px 1px 2px 1px #ccc;
		padding: 0 10px 0 8px;

		.box-left {
			width: 10%;
			position: relative;
			display: flex;

			.box-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}

			.page-btn {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 3;

				image {
					width: 25px;
					height: 25px;
					border-radius: 50%;
				}
			}
		}

		.box-content {
			width: 90%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			font-size: 12px;

			.content-name {
				width: 100%;
				display: -webkit-box;
				/* 弹性盒模型 */
				-webkit-box-orient: vertical;
				/* 元素垂直居中*/
				-webkit-line-clamp: 1;
				/*  文字显示的行数*/
				overflow: hidden;
				/* 超出隐藏 */
			}

			.progress {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				slider {
					width: 80%;
				}
			}
		}
	}
</style>

